<template>
  <pane :title="title" v-if="listCount.length">
    <template slot="content">
      <ul class="module-content">
        <li v-for="(item, index) in listCount">
          <a :href="'/search/?keyword=' + item" target="_blank">
            <i class="search-no" :class="'search-no-' + (index + 1)">{{index + 1}}</i>
            <span class="search-text">{{item}}</span>
          </a>
        </li>
      </ul>
    </template>
  </pane>
</template>

<style scoped lang="less">
  @import "./hotwords.less";
</style>

<script>
  import Pane from '../../pane'
  import reqwest from 'reqwest'

  export default {
    name: 'HotWords',
    props: {
      getHotWordsUrl: {
        type: String,
        default: 'http://www.toutiao.com/c/hot_words/'
      },
      title: {
        type: String,
        default: '热门搜索排行'
      },
      count: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        data: []
      }
    },
    mounted() {
      reqwest({
        url: this.getHotWordsUrl,
        method: 'GET',
        success: (res) => {
          if (res.message === 'success') {
            if (!Array.isArray(res.data) || res.data.length === 0) return
            this.data = res.data
          }
        }
      })
    },
    computed: {
      listCount: function () {
        return this.data.slice(0, this.count)
      }
    },
    components: {
      Pane
    }
  }
</script>



// WEBPACK FOOTER //
// hotwords.vue?79447e9b
